<template>
  <div class="tag-container">
    <div class="tag-title" :class="props.color">{{ props.title }}</div>
    <div class="tag-content" :class="props.color">
      <slot></slot>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { defineProps } from 'vue';

  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    color: {
      type: String,
      default: '',
    },
  });
</script>
<style scoped lang="less">
  .tag-container {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    border: 1px solid rgb(240 240 240);
    border-radius: 4px;

    .tag-title {
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: 200px;
      padding: 0 16px;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;

      &.red {
        background-color: rgb(244 88 9);
        color: #fff;
      }

      &.green {
        background-color: rgb(55 127 127);
        color: #fff;
      }
    }

    .tag-content {
      padding: 0 16px;
      text-align: center;

      &.red {
        color: rgb(244 88 9);
      }

      &.green {
        color: rgb(55 127 127);
      }
    }
  }
</style>
